<template>
  <div class="page-container">
    <!--工具栏-->
    <el-dialog title="物料"   class="my-dialog-class" width="80%" :visible.sync="itemDialogVisible" :before-close="handleClose">

    <div class="gk-layout-container">
    <div class="gk-layout-header">
      <div   style="float:left;">
        <el-form :inline="true"  :model="filters"  :size="global.gSize">
          <el-form-item>
            <el-input v-model="filters.name"
                      :placeholder="$t('item.please enter')"></el-input>
          </el-form-item>
          <el-form-item>
              <el-select v-model="filters.classifyId"
                     placeholder="请选择物料类别"
                     style="width: 175px;"
                     clearable>
                <el-option v-for="item in classTypes"
                       :key="item.id"
                       :label="item.name+item.areaId"
                       :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
        <kt-button icon="fa fa-search"  :label="$t('action.search')"   perms="material:item:view"  type="primary"
                            @click="findPage(null)" />
          <!-- <el-form-item>
            <el-select v-model="filters.coreItemType"
                     placeholder="请选择物料类型"
                     style="width: 175px;"
                     clearable>
              <el-option v-for="item in dicts.coreItemType"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->

        </el-form>
      </div>

     
</div>



  <div class="gk-layout-header">


<my-table :data="pageResult.content" :loading="loading"  @selection-change="selectionChange"  >
        <el-table-column type="selection" width="40" ></el-table-column>
      
        <el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
          <template slot-scope="scope"> {{scope.$index+1}} </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" 
            width="300" prop="name" label="名称" key="name"/>

        <el-table-column header-align="center" align="center"   
            prop="classifyId" key="classifyId" label="类别"  :formatter="selectionFormat"/>

        <el-table-column :label="$t('action.operation')" width="200" fixed="right"  header-align="center" align="center">
          <template slot-scope="scope">
            <kt-button icon="fa fa-trash" :label="$t('action.Select')" perms="material:item:view"   type="danger" @click="handleSelect(scope.$index, scope.row)" />
          </template>
      </el-table-column>
      </my-table>
    </div>
    <!--分页栏-->
    <div class="toolbar gk-layout-footer" style="padding:10px;">
      <kt-button icon="fa fa-trash"  :label="$t('action.batchSelect')"  perms="material:item:view"  type="danger"
           @click="handleBatchSelect()"   :disabled="this.selections.length===0" style="float:left;" />
      <el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
        :current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="pageResult.totalSize"
        style="float:right;">
      </el-pagination>
    </div>


      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
 
import KtButton from "@/views/Core/KtButton"
import MyTable from "@/views/Core/MyTable"
import { format } from "@/utils/datetime"
export default {
  components: {
    PopupTreeInput,
 
    KtButton,
    MyTable
  },
  props: {
    fromCorpId: {  // 供应商主键
      type: Number
    },
    itemDialogVisible: {
      type: Boolean
    }
  },
  data () {
    return {
   
      filters: {
        name: ''
      },
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 5 },
      pageResult: {},
      dicts:this.$store.state.dict.dicts,
            selections: []  ,// 列表选中列
      // 新增编辑界面数据
      editLoading: false,
      loading:false,
      dataForm: {
        id: 0,
        //classifyId: ,
        code: '',
        name: '',
        active: 0
      },
      classTypes: []
    }
  },

  methods: {
    //获取分页数据
        findPage: function (data) {
          this.filters.supplierId = this.fromCorpId
          if(data!==null){
            this.filters.pageNum=this.pageRequest.pageNum		
          }else{
            this.filters.pageNum=1
            this.pageRequest.pageNum=1
          }
          this.filters.pageSize=this.pageRequest.pageSize
          //入库单物料选择
          if(this.fromCorpId!=null){
              this.$api.receiptIn.findItemPage(this.filters).then((res) => {
              this.pageResult = res.data
              this.findClassTypes()
            }).then(data != null ? data.callback : '')
          }
          else{
          //出库单物料选择
              this.$api.item.findPage(this.filters).then((res) => {
              this.pageResult = res.data
              this.findClassTypes()
            }).then(data != null ? data.callback : '')
          }


        },

        selectionChange: function (selections) {
            this.selections = selections
        
        },
        handleSelect: function (index, row) {
            this.$emit('handleSelect',[row.id])
        },
        // 批量选择
        handleBatchSelect: function () { 
          let ids = this.selections.map(item => item.id) 
           this.$emit('handleSelect',ids)
        },
 
     
          selectionFormat: function (row, column, cellValue, index) {
            let key = ""
            let propt = column.property;
            let val = row[column.property];
            let dict = this.classTypes;
            for (let i = 0; i < dict.length; i++) {
              if (dict[i].id == val) {
                return dict[i].name;
              }
            }
            return val
          },
           
          //加载物料类别分类
          findClassTypes: function () {
            this.$api.classify.findPage().then((res) => {
              this.classTypes = res.data.content

            })
          },
          handleClose: function () {
            this.$emit('itemHidden', {})
          },

  
  },
  created () {
    this.findClassTypes()
  },
  mounted () {

      this.findPage(1)
  
  }

}

</script>

<style scoped>
</style>
